<template>
	<view class="content-box">
		<view v-for="(item,index) in bookList" :key="index" class="everyClass" @click.stop="clickBookListFn(item.book)">
			<image :src="item.book.cover" style="height: 300rpx;width: 200rpx" mode="contain"></image>
			<text class="textDesc">{{item.book.title}}</text>
		</view>
	</view>
	<uni-popup ref="message" type="message">
		<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import getApiData from '../getAPIData';

	let bookListObj = ref({})
	let bookList = ref([])
	let message = ref(null)
	let msgType = ref("warn")
	let messageText = ref("")

	onMounted(() => {
		let id = uni.getStorageSync("bookListId")
		getApiData.getBookListDetail(id).then(res => {
			if (res.ok && res.bookList && res.bookList.books) {
				bookListObj.value = res.bookList
				res.bookList.books.forEach(item => {
					item.book.cover = item.book.cover.split("/")[item.book.cover.split("/")
						.length - 1].split(
						"%3A").join(":").split("%2F").join("/")
				})
				bookList.value = res.bookList.books
			}
			uni.removeStorageSync("bookListId")
		})
	})

	onMounted(() => {

	})

	const clickBookListFn = (item) => {
		// console.log(item)
		messageText.value = `sorry啦~目前只能拿到ID剩下的API并没找到`
		message.value.open()
	}
</script>

<style scoped>
	.content-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}

	.textDesc {
		width: 90%;
		font-size: 20rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 5rpx;
		text-align: center;
	}


	.everyClass {
		width: 33%;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		margin: 20rpx 0;
	}
</style>